<!--
 * @Author: dzj
 * @Date: 2021-11-19 18:18:36
 * @Description: 
-->
<template>
  <div style="width: 100%">
    <!-- <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img src="../assets/no_border.png" @click="returnlink" style="height:70px" />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop">
        <span class="el-dropdown-link">
          用户{{ $store.getters.userName }}，您好！
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnmydoor2"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header> -->
    <!-- <search @changesearch="changesearch"></search> -->
    <search
      :input1="input"
      :typeGroup1="typeGroup"
      :value1="value"
      :display="false"
    ></search>
    <!-- <h3 @click="downloadtest">下载</h3> -->
    <div class="main">
      <div class="coll">
        <div class="demo-collapse">
          <el-card class="type-card">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="资源类型" name="1">
                <span
                  v-if="this.ResourceType.length === 0"
                  style="color: #c6c6cd"
                  >暂无分组数据</span
                >
                <el-popover
                  v-if="this.ResourceType.length !== 0"
                  placement="right-end"
                  :width="200"
                  trigger="hover"
                >
                  <template #reference>
                    <div>
                      <el-checkbox-group
                        v-if="this.ResourceType.length !== 0"
                        v-model="checkedReType"
                        class="check_display"
                      >
                        <template v-for="(item, index) in ResourceType">
                          <el-checkbox
                            :label="item"
                            :key="item.index"
                            v-if="index <= 1"
                            >{{ item }}</el-checkbox
                          >
                        </template>
                      </el-checkbox-group>
                      <!-- 0 -->
                    </div>
                  </template>
                  <el-checkbox
                    :indeterminate_one="isIndeterminate_one"
                    v-model="checkAll_one"
                    @change="handleCheckAllChange_one"
                    >全选</el-checkbox
                  >
                  <div style="margin: 15px 0"></div>
                  <el-checkbox-group
                    v-model="checkedReType"
                    @change="handleCheckedCitiesChange_one"
                  >
                    <el-checkbox
                      v-for="type in ResourceType"
                      :label="type"
                      :key="type"
                      >{{ type }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <el-button
                    type="primary"
                    size="mini"
                    style="float: right"
                    @click="gosearch_twice(0, this.cur_page)"
                    >确定</el-button
                  >
                </el-popover>
              </el-collapse-item>
              <el-collapse-item title="年份" name="2">
                <span
                  v-if="this.ResourceTime.length === 0"
                  style="color: #c6c6cd"
                  >暂无分组数据</span
                >
                <el-popover
                  v-if="this.ResourceTime.length !== 0"
                  placement="right-end"
                  :width="200"
                  trigger="hover"
                >
                  <template #reference>
                    <div>
                      <el-checkbox-group
                        v-if="this.ResourceTime.length !== 0"
                        v-model="checkedReTime"
                        class="check_display"
                      >
                        <template v-for="(item, index) in ResourceTime">
                          <el-checkbox
                            :label="item"
                            :key="item.index"
                            v-if="index <= 1"
                            >{{ item }}</el-checkbox
                          >
                        </template>
                      </el-checkbox-group>
                      <!-- 0 -->
                    </div>
                  </template>
                  <el-checkbox
                    :indeterminate_two="isIndeterminate_two"
                    v-model="checkAll_two"
                    @change="handleCheckAllChange_two"
                    >全选</el-checkbox
                  >
                  <div style="margin: 15px 0"></div>
                  <el-checkbox-group
                    v-model="checkedReTime"
                    @change="handleCheckedCitiesChange_two"
                  >
                    <el-checkbox
                      v-for="type in ResourceTime"
                      :label="type"
                      :key="type"
                      >{{ type }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <el-button
                    type="primary"
                    size="mini"
                    style="float: right"
                    @click="gosearch_twice(0, this.cur_page)"
                    >确定</el-button
                  >
                </el-popover>
              </el-collapse-item>
              <el-collapse-item title="学科分类" name="3">
                <span
                  v-if="this.ResourceField.length === 0"
                  style="color: #c6c6cd"
                  >暂无分组数据</span
                >
                <el-popover
                  v-if="this.ResourceField.length !== 0"
                  placement="right-end"
                  :width="550"
                  trigger="hover"
                  :class="{
                    class3: 'true' == 'true',
                    class4: this.ResourceField.length === 0,
                  }"
                >
                  <template #reference>
                    <div>
                      <el-checkbox-group
                        v-model="checkedReField"
                        class="check_display"
                      >
                        <template v-for="(item, index) in ResourceField">
                          <el-checkbox
                            :label="item"
                            :key="item.index"
                            v-if="index <= 1"
                            >{{ item }}</el-checkbox
                          >
                        </template>
                      </el-checkbox-group>
                      <!-- 0 -->
                    </div>
                  </template>
                  <el-checkbox
                    :indeterminate_three="isIndeterminate_three"
                    v-model="checkAll_three"
                    @change="handleCheckAllChange_three"
                    >全选</el-checkbox
                  >
                  <div style="margin: 15px 0"></div>
                  <el-checkbox-group
                    v-model="checkedReField"
                    @change="handleCheckedCitiesChange_three"
                  >
                    <el-checkbox
                      v-for="type in ResourceField"
                      :label="type"
                      :key="type"
                      >{{ type }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <el-button
                    type="primary"
                    size="mini"
                    style="float: right"
                    @click="gosearch_twice(0, this.cur_page)"
                    >确定</el-button
                  >
                </el-popover>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </div>
      </div>
      <div class="article">
        <div
          class="choice_input"
          style="display: flex; flex-flow: row nowrap; align-items: center"
        >
          <el-input
            v-model="title"
            placeholder="题名"
            style="
              width: 18%;
              margin-right: 3%;
              margin-bottom: 20px;
              height: 30px;
            "
            @keyup.enter="gosearch_twice(0, this.cur_page)"
          />
          <el-input
            v-model="author"
            placeholder="作者"
            style="
              width: 18%;
              margin-right: 3%;
              margin-bottom: 20px;
              height: 30px;
            "
            @keyup.enter="gosearch_twice(0, this.cur_page)"
          />
          <el-input
            v-model="key"
            placeholder="关键词"
            style="
              width: 18%;
              margin-right: 3%;
              margin-bottom: 20px;
              height: 30px;
            "
            @keyup.enter="gosearch_twice(0, this.cur_page)"
          />
          <div class="block">
            <el-date-picker
              v-model="start_year"
              type="year"
              placeholder="起始年"
              style="width: 100%; height: 30px; margin-bottom: 20px"
              @keyup.enter="gosearch_twice(0, this.cur_page)"
            >
            </el-date-picker>
          </div>
          <div style="margin-bottom: 20px">—</div>
          <div class="block">
            <el-date-picker
              v-model="end_year"
              type="year"
              placeholder="结束年"
              style="width: 100%; height: 30px; margin-bottom: 20px"
              @keyup.enter="gosearch_twice(0, this.cur_page)"
            >
            </el-date-picker>
          </div>
          <el-button
            class="search_button"
            size="small"
            style="
              width: 15%;
              height: 10px;
              padding-left: 5%;
              background: rgb(22 123 223);
              color: #fff;
              margin-left: 3%;
              padding: 0 20px;
              letter-space: 8px;
              margin-bottom: 20px;
            "
            @click="gosearch_twice(0, this.cur_page)"
            >在结果中检索</el-button
          >
        </div>
        <el-card class="box-card">
          <template #header>
            <div
              class="card-header"
              style="
                padding-bottom: 25px;
                padding-top: 12px;
                background-color: transparent;
              "
            >
              <span style="float: left">排序：</span>
              <el-radio-group
                v-model="radio_sort"
                style="float: left"
                @change="changesort"
              >
                <el-radio :label="1" style="padding-bottom: 10px"
                  >相关度</el-radio
                >
                <el-radio :label="2">年份倒序</el-radio>
                <el-radio :label="3">年份正序</el-radio>
              </el-radio-group>
            </div>
          </template>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="files"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            row-key="id"
          >
            <el-table-column
              type="selection"
              lable=""
              width="30"
              :reserve-selection="true"
            />
            <el-table-column label="" :reserve-selection="true">
              <template #header>
                <div style="width: 90%">
                  <span
                    class="span2"
                    style="margin-left: 5px"
                    @click="toggleSelection()"
                    >清除</span
                  >
                  <span
                    class="span2"
                    @click="exporting_all(this.multipleSelection)"
                    >导出</span
                  >
                  <span style="float: right">已找到{{ this.total }}条结果</span>
                </div>
              </template>
              <template #default="scope">
                <div class="file">
                  <h4 class="title" @click="gotodetail(files[scope.$index].id)">
                    {{ scope.row["number"] }}.{{ scope.row["title"] }}
                  </h4>
                  <div style="display: flex; flex-flow: row nowrap">
                    <h5 v-if="files[scope.$index].type!==null&&files[scope.$index].type!==''">[{{ scope.row["type"] }}]</h5>
                    <h5
                      class="title"
                      v-for="person in files[scope.$index].author"
                      :key="person.index"
                      style="margin-left: 10px"
                      @click="goauthor(person.id)"
                    >
                      {{ person.name }}
                    </h5>
                    <h5>- {{ scope.row["pub_year"] }}</h5>
                  </div>
                  <div style="margin-bottom: 10px">
                    <h5
                      v-if="files[scope.$index].abstract !== ''"
                      style="
                        display: -webkit-box;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        white-space: normal;
                        line-height: 15px;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                      "
                    >
                      摘要：{{ scope.row["abstract"] }}
                    </h5>
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      display: flex;
                      flex-flow: row nowrap;
                    "
                  >
                    <h5
                      v-for="key1 in files[scope.$index].key_word"
                      :key="key1.index"
                      style="margin-right: 10px; text-decoration: underline"
                    >
                      {{ key1 }}
                    </h5>
                  </div>
                </div>
                <el-button
                  size="mini"
                  style="margin-left: 22px"
                  @click="read(files[scope.$index].id)"
                  >在线阅读</el-button
                >
                <el-button
                  size="mini"
                  style="margin-left: 15px"
                  @click="
                    download(files[scope.$index].id, files[scope.$index].title)
                  "
                  ><i class="el-icon-menu"></i>下载</el-button
                >
                <el-button
                  size="mini"
                  style="margin-left: 15px"
                  @click="exporting(files[scope.$index].id)"
                  >导出</el-button
                >
                <el-dialog
                  v-model="dialogVisible"
                  title="引文格式"
                  width="30%"
                  :before-close="handleClose"
                >
                  <span>[1]{{ scope.row["exp_ref"] }}</span>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="dialogVisible = false"
                        >确定</el-button
                      >
                    </span>
                  </template>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div
          style="
            padding-top: 20px;
            padding-bottom: 20px;
            margin: 0 auto;
            width: 40%;
          "
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="cur_page"
            :total="this.total"
            :page-size="5"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import search from "../views/Search.vue";
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  inject: ["reload"],
  components: { search },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    localStorage.setItem("multipleSelection", JSON.stringify([]));
    localStorage.setItem("list", JSON.stringify([]));
    if (to.path === "/searchpreview" || to.path === "/detail") {
      if (Object.keys(to.params).length !== 0) {
        console.log(!0);
        localStorage.setItem("input", to.params.input);
        localStorage.setItem("typeGroup", JSON.stringify(to.params.typeGroup));
        localStorage.setItem("value", to.params.value);
      }
      let input = localStorage.getItem("input");
      let typeGroup = JSON.parse(localStorage.getItem("typeGroup"));
      let value = localStorage.getItem("value");
      //     axios.post('code/',input,typeGroup,value).then((response) => {
      //   this.$router.push('/searchpreview/'+this.input+response)
      // })
      console.log(to);
      console.log(input);
      console.log(typeGroup);
      console.log(value);
      console.log(111111111111111111111);
      console.log(this.row_files);
      next();
      location.reload();
    } else {
      next();
    }
  },
  data() {
    return {
      dialogVisible: false,
      cur_page: 1,
      comName: [],
      super1: null,

      total: 0,
      //传递给子组件
      input: "",
      typeGroup: [],
      value: "",
      history: [],

      radio_sort: 1, //排序方式的选择，选中的为label
      // types: [
      //   {
      //     value: "1",
      //     label: "全部",
      //   },
      //   {
      //     value: "2",
      //     label: "期刊",
      //   },
      //   {
      //     value: "3",
      //     label: "会议",
      //   },
      // ],
      // options: [
      //   {
      //     value: "year",
      //     label: "关键词",
      //   },
      //   {
      //     value: "month",
      //     label: "篇名",
      //   },
      //   {
      //     value: "day",
      //     label: "作者",
      //   },
      // ],
      // history: [
      //   {
      //     value: "year",
      //     label: "li",
      //   },
      //   {
      //     value: "month",
      //     label: "睡眠",
      //   },
      //   {
      //     value: "day",
      //     label: "英语",
      //   },
      // ],
      // cityOptions : ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"],
      // row_files: [
      //   {
      //     number: 1,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 2,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 3,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 1,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      // ],
      // row_files: [
      //   {
      //     number: 1,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_word: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 2,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_word: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 3,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_word: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      //   {
      //     number: 1,
      //     name: "基于波动与扩散物理系统的机器学习",
      //     type: "期刊论文",
      //     author: ["陈江芷", "杨晨", "温任捷"],
      //     source: "《物理学报》 2021年14期",
      //     abstract:
      //       "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //     key_word: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   },
      // ],
      files: [],
      //资源类型
      checkAll_one: false,
      checkedReType: [],
      ResourceType: [],
      // ResourceType: ["专利", "期刊", "会议", ],
      isIndeterminate_one: true,
      //年份
      checkAll_two: false,
      checkedReTime: [],
      ResourceTime: [],
      isIndeterminate_two: true,
      //年份
      checkAll_three: false,
      checkedReField: [],
      ResourceField: [],
      isIndeterminate_three: true,

      number: 0, //搜寻到的结果数
      //输入框部分
      title: "",
      author: "",
      key: "",
      multipleSelection: [], //选中的论文
      exporter: "导出成功", //导出的内容

      start_year: "",
      end_year: "",
      url: "",
    };
  },
  methods: {
    addsuper() {
      console.log(this.comName.length);
      if (this.comName.length < 3) {
        this.comName.push({
          name: "SuperSearch",
        });
      }
    },
    gonormal() {
      this.super1 = false;
      localStorage.setItem("super", false);
    },
    returnlink() {
      this.$router.push("/");
    },
    getparams() {
      if (Object.keys(this.$route.params).length !== 0) {
        localStorage.setItem("input", this.$route.params.input);
        localStorage.setItem(
          "typeGroup",
          JSON.stringify(this.$route.params.typeGroup)
        );
        localStorage.setItem("value", this.$route.params.value);
      }
    },
    getpost() {
      if (localStorage.getItem("input") !== null) {
        this.input = localStorage.getItem("input");
      }
      // this.history=
      if (JSON.parse(localStorage.getItem("typeGroup")) !== null) {
        this.typeGroup = JSON.parse(localStorage.getItem("typeGroup"));
      }
      if (localStorage.getItem("value") !== null) {
        this.value = localStorage.getItem("value");
      }
      console.log(this.input);
      console.log(this.typeGroup);
      console.log(this.value);
      console.log(111111111111111111111);
      // this.row_files=[];//在此处发请求后更改row_files、ResourceType、ResourceTime、ResourceField即可
      let typelist = [];
      if (this.typeGroup.includes("论文")) {
        typelist.push("article");
      }
      if (this.typeGroup.includes("期刊")) {
        typelist.push("journal");
      }
      if (this.typeGroup.includes("专著")) {
        typelist.push("book");
      }
      if (this.typeGroup.includes("会议")) {
        typelist.push("proceedings");
      }
      if (this.typeGroup.includes("专利")) {
        typelist.push("patent");
      }
      this.loading = true;
      axios
        .post("aa/search/", {
          input: this.input,
          typeGroup: typelist,
          value: this.value,
          page: 1,
        })
        .then((res) => {
          this.files = res.data.source;
          this.total = res.data.total;
          this.loading = false;
          this.files.forEach((item) => {
            if (item.type === "journal") {
              item.type = "期刊";
            }
            if (item.type === "dissertation") {
              item.type = "学位论文";
            }
            if (item.type === "book") {
              item.type = "专著";
            }
            if (item.type === "patent") {
              item.type = "专利";
            }
            if (item.type === "proceedings") {
              item.type = "会议";
            }
          });
          console.log(this.files);
        });
      axios
        .post("years/", {
          input: this.input,
          typeGroup: typelist,
          value: this.value,
        })
        .then((res) => {
          this.ResourceTime = res.data.years;
        });
      axios
        .post("types/", {
          input: this.input,
          value: this.value,
        })
        .then((res) => {
          this.ResourceType = res.data.types;
          this.ResourceType.forEach((item, index) => {
            if (item === "journal") {
              console.log(77777777777777);
              this.ResourceType[index] = "期刊";
              // item = "期刊";
            }
            if (item === "dissertation") {
              this.ResourceType[index] = "学位论文";
            }
            if (item === "book") {
              this.ResourceType[index] = "专著";
            }
            if (item === "proceedings") {
              this.ResourceType[index] = "会议";
            }
            if (item === "patent") {
              this.ResourceType[index] = "专利";
            }
          });
          console.log(this.ResourceType);
        });
      axios
        .post("departments/", {
          input: this.input,
          typeGroup: typelist,
          value: this.value,
        })
        .then((res) => {
          this.ResourceField = res.data.types;
        });
    },

    changesearch(param) {
      this.row_files = param;
      this.files = this.getList(this.row_files, 1, 3);
      this.loading = false;
    },
    search_his(value) {
      this.input = value;
    },
    //资源类型
    handleCheckAllChange_one(val) {
      this.checkedReType = val ? this.ResourceType : [];
      this.isIndeterminate_one = false;
    },
    handleCheckedCitiesChange_one(value) {
      let checkedCount = value.length;
      this.checkAll_one = checkedCount === this.ResourceType.length;
      this.isIndeterminate_one =
        checkedCount > 0 && checkedCount < this.ResourceType.length;
    },
    //资源年份
    handleCheckAllChange_two(val) {
      this.checkedReTime = val ? this.ResourceTime : [];
      this.isIndeterminate_two = false;
    },
    handleCheckedCitiesChange_two(value) {
      let checkedCount = value.length;
      this.checkAll_two = checkedCount === this.ResourceTime.length;
      this.isIndeterminate_two =
        checkedCount > 0 && checkedCount < this.ResourceTime.length;
    },
    //学科分类
    handleCheckAllChange_three(val) {
      this.checkedReField = val ? this.ResourceField : [];
      this.isIndeterminate_three = false;
    },
    handleCheckedCitiesChange_three(value) {
      let checkedCount = value.length;
      this.checkAll_three = checkedCount === this.ResourceField.length;
      this.isIndeterminate_three =
        checkedCount > 0 && checkedCount < this.ResourceField.length;
    },

    toggleSelection(rows) {
      localStorage.setItem("multipleSelection", JSON.stringify([]));
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //数组去重
    unique(arr) {
      // 根据唯一标识no来对数组进行过滤
      const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1));
    },

    handleSelectionChange(val) {
      let list = [];
      console.log(val);
      Object.values(val).forEach((ele) => {
        console.log(ele);
        list.push(
          ele["id"] //有可能换为id
        );
      });
      console.log(list);
      let list_last = JSON.parse(localStorage.getItem("list"));
      console.log(localStorage.getItem("multipleSelection"));
      console.log(JSON.parse(localStorage.getItem("multipleSelection")));

      let list_now = JSON.parse(localStorage.getItem("multipleSelection"));

      list_now.push.apply(list_now, list);
      //删除取消勾选的list_last有，但list中无的元素
      if (list_last !== null) {
        list_last.forEach((item) => {
          if (!list.includes(item)) {
            //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
            let index = list_now.indexOf(item);
            list_now.splice(index, 1);
          }
        });
      }

      console.log(list_now);
      list_now = this.unique(list_now);
      console.log(list_now);
      localStorage.setItem("multipleSelection", JSON.stringify(list_now)); //multipleSelection为目前选中的所有
      localStorage.setItem("list", JSON.stringify(list));
      this.multipleSelection = list_now;
    },

    exporting_all(list) {
      //后端提供txt文件
      console.log(list);
      axios
        .post("exp_ref/", { acd_ach_id: this.multipleSelection })
        .then((res) => {
          if (res.data.code === 0) {
            console.log(res);
            this.url = res.data.url;
            console.log(this.url);
            ElMessage({
              message: "导出成功！",
              type: "success",
            });
        
            // window.location.href = this.url;
            window.open(this.url);
          }
        });
      // this.$alert(this.exporter, "导出", {
      //   confirmButtonText: "确定",
      //   // callback: (action) => {
      //   //   this.$message({
      //   //     type: "info",
      //   //     message: `action: ${action}`,
      //   //   });
      //   // },
      // });
    },
    //单个导出
    exporting(number) {
      //后端提供txt文件
      this.dialogVisible = true;
      console.log(number);
      // let list = [];
      // list.push(number);
      // axios.post("exp_ref/", { acd_ach_id: list }).then((res) => {
      //   if (res.data.code === 0) {
      //     console.log(res);
      //     this.url = res.data.url;
      //     console.log(this.url);
      //     alert("导出成功！");

      //     // window.location.href = this.url;
      //     window.open(this.url);
      //   }
      // });
    },
    // downloadtest() {
    //   let url = "https://spectreattack.com/spectre.pdf";
    //   fetch(url, {
    //     method: "get",
    //     responseType: "arraybuffer",
    //   })
    //     .then(function (res) {
    //       if (res.status !== 200) {
    //         return res.json();
    //       }
    //       return res.arrayBuffer();
    //     })
    //     .then((blobRes) => {
    //       // 生成 Blob 对象，设置 type 等信息
    //       const e = new Blob([blobRes], {
    //         type: "application/pdf",
    //         "Content-Disposition": "attachment",
    //       });
    //       // 将 Blob 对象转为 url
    //       const url = window.URL.createObjectURL(e);
    //       const link = document.createElement("a"); // 创建a标签
    //       link.style.display = "none"; // 将a标签隐藏
    //       // link.target = "_blank";
    //       // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
    //       link.href = url;
    //       link.download = true;
    //       // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
    //       document.body.appendChild(link);
    //       link.click(); // 执行a标签
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    //   // let blobRes = "https://spectreattack.com/spectre.pdf";
    //   // const e = new Blob([blobRes], {
    //   //   type: "application/octet-stream",
    //   //   "Content-Disposition": "attachment",
    //   // });
    //   // const url = window.URL.createObjectURL(e);
    //   // // window.open("http://127.0.0.1:8000/media/1.docx")
    //   // const link = document.createElement("a"); // 创建a标签
    //   // link.style.display = "none"; // 将a标签隐藏
    //   // // link.target = "_blank";
    //   // // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
    //   // link.href = url;
    //   // link.download = true;
    //   // // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
    //   // document.body.appendChild(link);
    //   // link.click(); // 执行a标签
    // },
    //下载
    download(id, name) {
      if (!this.$store.getters.isLogin) {
        ElMessage.error("您尚未登录，请先登录！");
      } else {
        axios.post("detail/", { acd_ach_id: id }).then((res) => {
          if (res.data.code === 0) {
            if (res.data.download === false) {
              ElMessage.error("该学术成果暂不支持下载！");
            } else {
              console.log(res);
              this.url = res.data.file_path;
              console.log(this.url);

              // let url = "https://spectreattack.com/spectre.pdf";
              fetch(this.url, {
                method: "get",
                responseType: "arraybuffer",
              })
                .then(function (res) {
                  if (res.status !== 200) {
                    return res.json();
                  }
                  return res.arrayBuffer();
                })
                .then((blobRes) => {
                  // 生成 Blob 对象，设置 type 等信息
                  const e = new Blob([blobRes], {
                    type: "application/pdf",
                    "Content-Disposition": "attachment",
                  });
                  // 将 Blob 对象转为 url
                  const url = window.URL.createObjectURL(e);
                  const link = document.createElement("a"); // 创建a标签
                  link.style.display = "none"; // 将a标签隐藏
                  // link.target = "_blank";
                  // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
                  link.href = url;
                  link.download = name;
                  // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                  document.body.appendChild(link);
                  link.click(); // 执行a标签
                })
                .catch((err) => {
                  console.error(err);
                });
              // let blobRes = "https://spectreattack.com/spectre.pdf";
              // const e = new Blob([blobRes], {
              //   type: "application/octet-stream",
              //   "Content-Disposition": "attachment",
              // });
              // const url = window.URL.createObjectURL(e);
              // // window.open("http://127.0.0.1:8000/media/1.docx")
              // const link = document.createElement("a"); // 创建a标签
              // link.style.display = "none"; // 将a标签隐藏
              // // link.target = "_blank";
              // // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
              // link.href = url;
              // link.download = true;
              // // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
              // document.body.appendChild(link);
              // link.click(); // 执行a标签
            }
          }
        });
      }
    },
    //在线阅读
    read(id) {
      axios.post("detail/", { acd_ach_id: id }).then((res) => {
        if (res.data.code === 0) {
          if (res.data.url === "--") {
            ElMessage("目前未收集该学术成果！");
          } else {
            console.log(res);
            this.url = res.data.file_path;
            console.log(this.url);

            window.open(this.url);
            // const link = document.createElement("a"); // 创建a标签
            // link.style.display = "none"; // 将a标签隐藏
            // link.target = "_blank";
            // link.href = "https://spectreattack.com/spectre.pdf"; // 给a标签添加下载链接
            // // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            // document.body.appendChild(link);
            // link.click(); // 执行a标签
          }
        }
      });
    },
    //分页
    getList(data, num, size) {
      let list, start, end;
      start = (num - 1) * size;
      end = start + size;
      list = data.filter((item, index) => {
        return index >= start && index < end;
      });
      list.forEach((item, index) => {
        item.seq = index + start;
      });
      return list;
    },
    handleCurrentChange(val) {
      console.log(this.radio_sort);
      let a = this.radio_sort;
      // if(this.radio_sort===1){
      //   a=0
      // }
      this.cur_page = val;
      this.gosearch_twice(a - 1, val);

      // axios
      //   .post("aa/search/", {
      //     input: this.input,
      //     typeGroup: this.typeGroup,
      //     value: this.value,
      //     page: val,
      //   })
      //   .then((res) => {
      //     this.files = res.data.source;
      //   });

      //this.files = this.getList(this.row_files, val, 3);
    },
    //更改排序
    changesort(val) {
      console.log(val);
      this.gosearch_twice(val - 1, this.cur_page);
      //val为选中的label(1\2\3)
      //   axios.post('code/',val).then((response) => {
      //   this.row_files=...
      // })
    },
    //页面跳转
    gotodetail(id) {
      console.log(id);
      // this.$router.push("/detail/" + number);
      localStorage.setItem("id", id);
      this.$router.push({
        name: "Detail",
        params: {
          id: id,
          input: this.input,
          typeGroup: this.typeGroup,
          value: this.value,
          files: this.files,
        },
      });
    },
    gosearch_twice(sort, page) {
      console.log(this.checkedReType);
      console.log(this.checkedReField);
      console.log(this.checkedReTime);
      console.log(this.title);
      console.log(this.author);
      console.log(this.key);
      console.log(this.start_year);
      console.log(this.end_year);
      // let typelist = this.checkedReType;
      // typelist.forEach((item, index) => {
      //   if (item === "期刊") {
      //     typelist[index] = "期刊";
      //     // item = "期刊";
      //   }
      //   if (item === "论文") {
      //     typelist[index] = "article";
      //   }
      //   if (item === "图书") {
      //     typelist[index] = "book";
      //   }
      //   if (item === "会议") {
      //     typelist[index] = "patent";
      //   }
      // });
      // console.log(typelist);
      this.loading = true;
      axios
        .post("aa/searchtwice/", {
          input: this.input,
          typeGroup: this.typeGroup,
          ResourceType: this.checkedReType, //二次检索的type,ResourceType为空时以typeGroup为准,未选为[]
          value: this.value,

          ResourceTime: this.checkedReTime, //二次检索的时间（离散）未选为[]
          ResourceField: this.checkedReField, //领域，未选为[]
          title: this.title, //二次检索题目，未填为""
          author: this.author, //二次检索作者，未填为""
          key: this.key, //二次检索关键词，未填为""
          start_year: this.start_year, //二次检索起始年，未填为""
          end_year: this.end_year, //二次检索结束年，未填为""
          page: page,
          page_size: 5,
          sort: sort, //0、1、2、3
        })
        .then((res) => {
          this.files = res.data.source;
          this.total = res.data.total;
          this.loading = false;
        });
      axios
        .post("years/", {
          input: this.input,
          typeGroup: this.typeGroup,
          ResourceType: this.checkedReType, //二次检索的type,ResourceType为空时以typeGroup为准,未选为[]
          value: this.value,

          ResourceTime: this.checkedReTime, //二次检索的时间（离散）未选为[]
          ResourceField: this.checkedReField, //领域，未选为[]
          title: this.title, //二次检索题目，未填为""
          author: this.author, //二次检索作者，未填为""
          key: this.key, //二次检索关键词，未填为""
          start_year: this.start_year, //二次检索起始年，未填为""
          end_year: this.end_year, //二次检索结束年，未填为""
          page: page,
          page_size: 5,
          sort: sort, //0、1、2、3
        })
        .then((res) => {
          this.ResourceTime = res.data.years;
        });
      axios
        .post("types/", {
          input: this.input,
          typeGroup: this.typeGroup,
          ResourceType: this.checkedReType, //二次检索的type,ResourceType为空时以typeGroup为准,未选为[]
          value: this.value,

          ResourceTime: this.checkedReTime, //二次检索的时间（离散）未选为[]
          ResourceField: this.checkedReField, //领域，未选为[]
          title: this.title, //二次检索题目，未填为""
          author: this.author, //二次检索作者，未填为""
          key: this.key, //二次检索关键词，未填为""
          start_year: this.start_year, //二次检索起始年，未填为""
          end_year: this.end_year, //二次检索结束年，未填为""
          page: page,
          page_size: 5,
          sort: sort, //0、1、2、3
        })
        .then((res) => {
          this.ResourceType = res.data.types;
          this.ResourceType.forEach((item, index) => {
            if (item === "journal") {
              console.log(77777777777777);
              this.ResourceType[index] = "期刊";
              // item = "期刊";
            }
            if (item === "dissertation") {
              this.ResourceType[index] = "学位论文";
            }
            if (item === "book") {
              this.ResourceType[index] = "专著";
            }
            if (item === "proceedings") {
              this.ResourceType[index] = "会议";
            }
            if (item === "patent") {
              this.ResourceType[index] = "专利";
            }
          });
          console.log(this.ResourceType);
        });
      axios
        .post("departments/", {
          input: this.input,
          typeGroup: this.typeGroup,
          ResourceType: this.checkedReType, //二次检索的type,ResourceType为空时以typeGroup为准,未选为[]
          value: this.value,

          ResourceTime: this.checkedReTime, //二次检索的时间（离散）未选为[]
          ResourceField: this.checkedReField, //领域，未选为[]
          title: this.title, //二次检索题目，未填为""
          author: this.author, //二次检索作者，未填为""
          key: this.key, //二次检索关键词，未填为""
          start_year: this.start_year, //二次检索起始年，未填为""
          end_year: this.end_year, //二次检索结束年，未填为""
          page: page,
          page_size: 5,
          sort: sort, //0、1、2、3
        })
        .then((res) => {
          this.ResourceField = res.data.types;
        });
    },
    goauthor(id) {
      if (id === 0) {
        ElMessage("该作者没有门户");
      } else if (id === this.$store.getters.id) {
        this.$router.push("/mydoor");
      } else {
        this.$router.push({
          name: "Door",
          params: {
            id: id,
          },
        });
      }
    },
  },
  created() {
    this.super1 = localStorage.getItem("super");
    console.log(this.super1);
    console.log(localStorage.getItem("history"));
    console.log(222222222222);
    this.getparams();
    this.getpost();

    // this.files = this.getList(this.row_files, 1, 3);
    // this.row_files = this.$route.query.files;
    console.log(this.$route.params);
    // axios.post('code/',this.input,this.typeGroup,this.value).then((response) => {
    //   this.$router.push('/searchpreview/'+this.input+response)
    // })
    // this.files = this.getList(this.row_files, 1, 3);
  },
};
</script>
<style scoped>
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.return .el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 30%;
  padding-right: 0;
  font-weight: 600;
}
.siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.return {
  position: absolute;
  left: 200px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.el-dropdown {
  position: absolute;
  left: 1300px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
.main {
  display: flex;
  flex-flow: row nowrap;
  height: 1000px;
}
.check_display {
  display: flex;
  flex-flow: column nowrap;
}
.el-radio-group {
  font-size: 0;
  margin-top: -0.9%;
  margin-left: 5%;
}
.span1 {
  margin-left: 5%;
  color: rgb(91, 154, 248);
}
.span1:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
.span2 {
  margin-left: 5%;
  color: #000;
}
.span2:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}

.coll {
  width: 13%;
  margin-left: 5%;
  margin-top: 3%;
}
.article {
  margin-top: 20px;
  margin-left: 4%;
  width: 70%;
}
.el-card__header {
  background-color: rgb(247, 247, 252);
}
.el-card {
  --el-card-border-color: #c9cbd1;
  --el-card-border-radius: 10px;
}
.el-checkbox {
  /* height: 200px; */
}
.el-checkbox_label {
  width: 800px;
}
h5 {
  margin: 10px 0px;
}
h4 {
  margin: 10px 0px;
}
.title {
  color: rgb(61 119 207);
}
.title:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
.el-table th.el-table__cell {
  padding: 0;
}
.article .el-input__inner {
  height: 30px;
}
.el-collapse {
  border: transparent;
}
.type_card {
  width: 200px;
}
.article .el-table .cell {
  padding-left: 6px;
}
</style>
